<?php $user=  User::withId($_SESSION['userid']); ?>
<div class="view-port" id="view-port">
    <ul class="info">
        <li>
            <p>Searching for:</p>
            <span><?php echo $this->streamView->model->query; ?></span>
        </li>

        <li>
            <p>Create on:</p>
            <span><?php $date = new DateTime($this->streamView->model->dateCreated);
            echo $date->format("d-m-Y");?></span>
        </li>
        <li>
            <p>By:</p>
            <span><?php echo $user->name; ?> - Admin</span>
        </li>
    </ul>
    <hr>

    <h3>MAIN SECTION</h3>
    <div style="height: 145px;">
        <ul id="main-section" class="lv-1">   
            <li data="hasChild"><a href="/#stream/"><i class="ub ub-mention ub-3x"></i>Mention</a>
                <ul class="lv-2 hide mention">
                    <li><i class="fa fa-star fa-lg"></i>Favorite</li>
                    <li><i class="ub ub-archive ub-lg"></i>Achrive</li>
                    <li><i class="ub ub-spam ub-lg"></i>Spam</li>
                    <li><i class="fa fa-trash-o fa-lg"></i>Trash</li>
                </ul>
                <ul class="lv-2 metrics">
                    <li class="selected"><a href="/#engagement/"><i class="fa fa-engagement fa-lg"></i>Engagement</a></li>
                    <li><a href="/#compare/"><i class="fa fa-comparison fa-lg"></i>Comparison</a></li>
                </ul>
            </li>
            <li><i class="ub ub-alert ub-3x"></i>Alert</li>
            <li data="hasChild" class="selected"><a href="/#metrics/"><i class="ub ub-metrics ub-3x"></i>Metrics</a></li>
        </ul>
    </div>
    <hr>

    <h3>FILTER THE DATA</h3>
    <ul class="filter">
        <li>
            <p class="header">DATE:</p>
            <div>
                <input id="datefrom-filter" value="<?php 
                    $date = new DateTime();
                    $dateInterval = new DateInterval('P10D');
                    $dateInterval->invert = 1;
                    $date->add($dateInterval);
                    echo $date->format('d-m-Y');
                ?>" type="date"/>
                <span>-</span>
                <input id="dateto-filter" value="<?php
                    $date = new DateTime();
                    echo $date->format('d-m-Y');
                ?>" type="date"/>
            </div>
        </li>

        <li>
            <p class="header">LANGUAGE:</p>
            <div>
                <select id="language-filter">
                    <option value="0">All Languages</option>
                    <option value="1">Undefined</option>
                    <option value="2">Vietnamese</option>
                    <option value="3">English</option>
                    <option value="4">Italian</option>
                    <option value="5">Catalan</option>
                    <option value="6">Maltese</option>
                    <option value="7">Galician</option>
                    <option value="8">Spanish</option>
                    <option value="9">French</option>
                    <option value="10">Czech</option>
                    <option value="11">Romanian</option>
                    <option value="12">Portuguese</option>
                    <option value="13">Malay</option>
                    <option value="14">Latvian</option>
                    <option value="15">German</option>
                    <option value="16">Welsh</option>
                    <option value="17">Indonesian</option>
                    <option value="18">Swahili</option>
                    <option value="19">Slovak</option>
                    <option value="20">Albanian</option>
                    <option value="21">Danish</option>
                    <option value="22">Turkish</option>
                    <option value="23">Polish</option>
                    <option value="24">Lithuanian</option>
                    <option value="25">Icelandic</option>
                    <option value="26">Irish</option>
                    <option value="27">Haitian</option>
                    <option value="28">Slovene</option>
                    <option value="29">Croatian</option>
                    <option value="30">Swedish</option>
                    <option value="31">Basque</option>
                    <option value="32">Estonian</option>
                    <option value="33">Norwegian</option>
                    <option value="34">Finnish</option>
                    <option value="35">Serbian</option>
                    <option value="36">Afrikaans</option>
                    <option value="37">Azerbaijani</option>
                    <option value="38">Dutch</option>
                    <option value="39">Hungarian</option>
                    <option value="40">Japanese</option>
                    <option value="41">Chinese</option>
                    <option value="42">Russian</option>
                    <option value="43">Korean</option>
                    <option value="44">Arabic</option>
                    <option value="45">Georgian</option>
                    <option value="46">Belarusian</option>
                    <option value="47">Greek</option>
                    <option value="48">Thai</option>
                    <option value="49">Ukrainian</option>
                    <option value="50">Inuktitut</option>
                    <option value="51">Bulgarian</option>
                    <option value="52">Khmer</option>
                    <option value="53">Hindi</option>
                    <option value="54">Urdu</option>
                    <option value="55">Persian</option>
                    <option value="56">Burmese</option>
                    <option value="57">Armenian</option>
                    <option value="58">Macedonian</option>
                    <option value="59">Bengali</option>
                    <option value="60">Tamil</option>
                    <option value="61">Lao</option>
                    <option value="62">Hebrew</option>
                    <option value="63">Yiddish</option>
                    <option value="64">Kannada</option>
                    <option value="65">Panjabi</option>
                    <option value="66">Malayalam</option>
                    <option value="67">Sinhala</option>
                    <option value="68">Gujarati</option>
                    <option value="69">Telugu</option>
                    <option value="70">Oriya</option>
                    <option value="71">Amharic</option>
                </select>
            </div>
        </li>

        <li>
            <p class="header">PLATFORM:</p>
            <div>
                <select id="platform-filter">
                    <option value="0">All Platforms</option>
                    <option value="1">Forums</option>
                    <option value="2">News</option>
                    <option value="3">Blogs</option>
                    <option value="4">Facebook</option>
                    <option value="5">Twitter</option>
                    <option value="6">Google Plus</option>
                    <option value="7">Classifieds</option>
                    <option value="8">Retailers</option>
                </select>
            </div>
        </li>

        <li>
            <p class="header">TAG:</p>
            <div>
                <select id="tag-filter">
                    <option value="0">All Tags</option>
                    <?php 
                        $tags = Tag::getList();
                        foreach($tags as $tag) :
                    ?>
                        <option value="<?php echo $tag->tagId; ?>"><?php echo $tag->tagName; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </li>
        
        <li>
            <p class="header">SOURCE:</p>
            <div>
                <select id="sources-filter">
                    <option value="0">All Sources</option>
                </select>
            </div>
        </li>

        <li>
            <p class="header">SENTIMENT:</p>
            <div>
                <select id="sentiment-filter">
                    <option value="0">All Sentiments</option>
                    <option value="1">Positive</option>
                    <option value="2">Neutral</option>
                    <option value="3">Negative</option>
                </select>
            </div>
        </li>
    </ul>
    <hr>
</div>
